<template>
  <div :class="['g-avatar', `g-avatar--${size}`]">
    <img :src="src">
  </div>
</template>

<script>
import avatar from '@/assets/images/icon-avatar.png'

export default {
  props: {
    size: {
      type: String,
      default: '100'
    },
    type: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    }
  },
  computed: {
    src() {
      return this.icon || avatar
    }
  }
}
</script>

<style lang="less">

.size(@size) {
  &--@{size} {
    width: @size * 1px;
    height: @size * 1px;
  }
}
.g-avatar {
  display: inline-block;
  background: #D7ECFF;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }

  .size(100);
  .size(80);
}
</style>
